<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #app {
        width: 375px;
        height: 667px;
        border: 1px solid #000;
        position: relative;
      }
      header {
        width: 100%;
        height: 70px;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      footer {
        width: 100%;
        height: 60px;
        border-top: 1px solid #000;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .item {
        width: 345px;
        height: 100px;
        border: 1px solid #000;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :style="{fontSize: size + 'px'}">
        <wb-header @abc="toBig"></wb-header>
        <wb-content></wb-content>
        <wb-footer></wb-footer>
      </div>
    </div>

    <script src="./vue.js"></script>
    <script>
      // header组件
      const WbHeader = {
        data() {
          return {
            num: 20,
          };
        },
        // template选项相当于js里面的outerHTML

        // 监听事件：让我们可以在子组件里面触发父组件的事件
        // 1. 在父组件的子组件标签上面添加自定义事件
        // 2. 在子组件合适的时机调用this.$emit方法进行触发自定义事件

        // this.$emit可以接受多个参数
        // 第一个参数是自定义事件的名称, 第二个参数是需要传递给父组件的值
        // 如果传的值是子组件的变量，那么就可以做到子传父
        template: `
          <header>微博 <button @click="handleClick">+</button></header>
        `,
        methods: {
          handleClick() {
            // console.log(111);
            this.$emit("abc", this.num);
          },
        },
      };

      // 子组件
      const WbContentItem = {
        props: ["title", "content"],
        template: `
          <div class="item">
            <h3>{{ title }}</h3>
            <p>{{ content }}</p>
            <button>点赞</button>
          </div>
        `,
      };

      // 内容组件
      // 父组件
      const WbContent = {
        components: {
          WbContentItem,
        },
        data() {
          return {
            list: [
              {
                id: 1,
                title: "不断开创金融高质量发展新局面",
                content: "中央金融工作会议鲜明提出“加快建设金融强国”的目标",
              },
              {
                id: 2,
                title: "前三季度轻工业运行保持回升向好态势",
                content: "中国轻工业联合会的最新数据显示",
              },
              {
                id: 3,
                title: "深刻认识构建新发展格局的实践逻辑",
                content: "泰国将派最大规模代表团参加第六届进博会",
              },
            ],
          };
        },
        template: `
          <wb-content-item v-for="item in list" :key="item.id" :title="item.title" :content="item.content"></wb-content-item>
        `,
      };

      // 底部
      const WbFooter = {
        template: `
          <footer>
            <input type="text" />
            <input type="text" />
            <button>发布</button>  
          </footer>
        `,
      };

      // root组件
      Vue.createApp({
        data() {
          return {
            size: 12,
          };
        },
        methods: {
          toBig(n) {
            // console.log("root", n);
            // this.size++;

            this.size = n;
          },
        },
        components: {
          WbHeader,
          WbContent,
          WbFooter,
        },
      }).mount("#app");
    </script>
  </body>
</html>
